<template>
	<view class="container">
		<view class="content_shang">
			<text>亏吨扣费</text>
		</view>
		<view class="content_xia">
			<view class="xia_shang">
				<view class="shang_shang">
					<view class="left">
						磅差在（含）
					</view>
					<view class="right">
						<input type="number" placeholder="请输入吨数" v-model="weight" />吨以内免扣费
					</view>
				</view>
				<view class="shang_xia">
					<view class="xia_left">
						每少0.01吨，扣
					</view>
					<view class="xia_right">
						<input type="number" placeholder="请输入金额" v-model="fee" />元
					</view>
				</view>
			</view>
			<view class="xia_text">
				卸车净重小于装车净重{{weight}}吨以内免扣费，每少0.01吨，扣费{{fee}}元。
			</view>
			<button class="submit-btn" @click="submitForm">提交</button>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const weight = ref('0.0');
	const fee = ref('0.5'); // 新增费用数据绑定
	// 提交表单
	const submitForm = () => {
		console.log("提交表单");
		// 提交逻辑
	};
</script>

<style lang="scss">
	.container {
		.content_shang {
			width: 100%;
			height: 130rpx;
			line-height: 130rpx;
			padding-left: 40rpx;
			font-size: 40rpx;
			background-color: #002fa7;
			color: #fff;
		}

		.content_xia {
			width: 100%;
			background-color: #eeeeee;
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 100vh;
			/* 高度占满整个视口 */

			.xia_shang {
				width: 90%;
				height: 170rpx;
				background-color: #fff;
				display: flex;
				flex-wrap: wrap;
				font-size: 40rpx;
				border-radius: 20rpx;
				margin-top: 30rpx;

				.shang_shang {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx 0 20rpx;
					border-bottom: 1px solid #eee;
					height: 50%;
					align-items: center;
				}

				.shang_shang .left {
					font-size: 29rpx;
					width: 50%;
				}

				.shang_shang .right {
					font-size: 29rpx;
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					/* 保证输入框和文字紧挨 */
				}

				.right input {
					width: 40%;
					height: 50rpx;
					border-radius: 5rpx;
					padding-left: 10rpx;
					font-size: 25rpx;
				}

				.shang_xia {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx 0 20rpx;
					border-bottom: 1px solid #eee;
					height: 50%;
					align-items: center;

					.xia_left {
						font-size: 29rpx;
						width: 50%;
					}

					.xia_right {
						font-size: 29rpx;
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						/* 保证输入框和文字紧挨 */
					}

					.xia_right input {
						width: 40%;
						height: 50rpx;
						border-radius: 5rpx;
						padding-left: 10rpx;
						font-size: 25rpx;
					}
				}

			}

			.xia_text {
				width: 90%;
				height: 200rpx;
				font-size: 26rpx;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
			}
		}

		.submit-btn {
			width: 700rpx;
			height: 80rpx;
			background-color: #1E62B8;
			color: white;
			border-radius: 10rpx;
			font-size: 32rpx;
			margin-top: -100rpx;
		}
	}
</style>